<template>
  <div class="center_bottom">
    <Echart
      :options="options"
      id="bottomLeftChart"
      class="echarts_bottom"
    ></Echart>
  </div>
</template>

<script>
import { getTotalByDateApi } from "@/api/home";
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {},
    };
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  mounted() {
    // this.getData();
  },
  watch: {
    data: {
      handler(val) {
        this.init(val);
      },
      deep: true,
    },
  },
  methods: {
    // getData() {
    //   this.pageflag = true;
    //   getTotalByDateApi("big6", { companyName: this.companyName }).then((res) => {
    //     if (res) {
    //       const category = ['项目结算均价平均价', '项目结算均价最高价', '项目结算总电费', '日前出清总电量', '结算电量总电量']
    //       const barData = [
    //         Number(res.projectSettlementAvgPrice || 0),
    //         Number(res.projectSettlementMaxPrice || 0),
    //         Number(res.projectSettlementSumCost || 0),
    //         Number(res.projectDayAheadClearedPower || 0),
    //         Number(res.projectSettlementSumPower || 0),
    //       ]
    //       this.init({category, barData});
    //     } else {
    //       this.pageflag = false;
    //       this.$Message({
    //         text: res.msg,
    //         type: "warning",
    //       });
    //     }
    //   });
    // },
    init(newData) {
      // const category = ['项目结算均价平均价', '项目结算均价最高价', '项目结算总电费', '日前出清总电量', '结算电量总电量']
      //     const barData = [
      //       Number(newData.projectSettlementAvgPrice || 0),
      //       Number(newData.projectSettlementMaxPrice || 0),
      //       Number(newData.projectSettlementSumCost || 0),
      //       Number(newData.projectDayAheadClearedPower || 0),
      //       Number(newData.projectSettlementSumPower || 0),
      //     ]
      const category = []
          const barData = []
      newData.forEach(item =>{
        category.push(item.name)
        barData.push(item.value)
      })
      
      // const category = ['项目结算均价平均价', '项目结算均价最高价', '项目结算总电费', '日前出清总电量', '结算电量总电量']
      //     const barData = [
      //       Number(newData.projectSettlementAvgPrice || 0),
      //       Number(newData.projectSettlementMaxPrice || 0),
      //       Number(newData.projectSettlementSumCost || 0),
      //       Number(newData.projectDayAheadClearedPower || 0),
      //       Number(newData.projectSettlementSumPower || 0),
      //     ]
          // this.init({category, barData});
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          // formatter: function (params) {
          //   // 添加单位
          //   var result = params[0].name + "<br>";
          //   params.forEach(function (item) {
          //     if (item.value) {
          //       if (item.seriesName == "安装率") {
          //         result +=
          //           item.marker +
          //           " " +
          //           item.seriesName +
          //           " : " +
          //           item.value +
          //           "%</br>";
          //       } else {
          //         result +=
          //           item.marker +
          //           " " +
          //           item.seriesName +
          //           " : " +
          //           item.value +
          //           "个</br>";
          //       }
          //     } else {
          //       result += item.marker + " " + item.seriesName + " :  - </br>";
          //     }
          //   });
          //   return result;
          // },
        },
        // legend: {
        //   data: ["已安装", "计划安装", "安装率"],
        //   textStyle: {
        //     color: "#B4B4B4",
        //   },
        //   top: "0",
        // },
        grid: {
          left: "68px",
          right: "40px",
          bottom: "30px",
          top: "20px",
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: "#FFFFFF",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#FFFFFF",
              },
            },

            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value}% ",
            },
          },
        ],
        series: [
          {
            name: "统计",
            type: "bar",
            barWidth: 24,
            itemStyle: {
              // borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#09C9C5" },
                { offset: 1, color: "#2D44FA" },
              ]),
            },
            data: barData,
          },
          // {
          //   name: "计划安装",
          //   type: "bar",
          //   barGap: "-100%",
          //   barWidth: 10,
          //   itemStyle: {
          //     borderRadius: 5,
          //     color: new graphic.LinearGradient(0, 0, 0, 1, [
          //       { offset: 0, color: "rgba(156,107,211,0.8)" },
          //       { offset: 0.2, color: "rgba(156,107,211,0.5)" },
          //       { offset: 1, color: "rgba(156,107,211,0.2)" },
          //     ]),
          //   },
          //   z: -12,
          //   data: newData.lineData,
          // },
          // {
          //   name: "安装率",
          //   type: "line",
          //   smooth: true,
          //   showAllSymbol: true,
          //   symbol: "emptyCircle",
          //   symbolSize: 8,
          //   yAxisIndex: 1,
          //   itemStyle: {
          //     color: "#F02FC2",
          //   },
          //   data: newData.rateData,
          // },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
